<template>
    <div class="inter">
        <loading v-bind:state="state"></loading>
        <ul class="other_1">
            <li class="main_li">
                <p>昵称：{{detail.name}}</p>
                <!--<p>{{detail.userIdentity}}</p>-->
            </li>
            <li class="main_li">
                <p>订单号：{{detail.nid}}</p>
                <p v-text="dateFormat"></p>
            </li>
        </ul>
        <div class="other_2">
            <img class="icon" :src="this.$Public.iconImg + 'address.svg'" alt="">
            <p class="add">{{detail.address}}</p>
            <!--<p class="receive_name">收货人：{{detail.receiver}}</p>-->
        </div>
        <div class="other_m">
            <p class="text_l">购买商品</p>
            <item-goods-order v-for="(res,index) in goods"
                              :key="index"
                              :img-url="res.good.pic"
                              :name="res.good.title"
                              :describe="getDes(res)"
                              :price="res.price"
                              :count="res.num"></item-goods-order>
            <div class="other_mb">
                <p class="add2">实付积分</p>
                <p class="add3">积分{{detail.money}}</p>
            </div>
        </div>

        <!--<div class="other_lost">-->
        <!--<p class="rec_h add2">-->
        <!--收到返利-->
        <!--</p>-->
        <!--<div class="rec_rebate_t">-->
        <!--<p class="rec add4" v-show="detail.subordinate !=''">下级:<span-->
        <!--class="add2">积分{{detail.subordinate}}</span></p>-->
        <!--<p class="rec add4" v-show="detail.total !=''">总代理商:<span class="add2">积分{{detail.total}}</span></p>-->
        <!--<p class="rec add4" v-show="detail.region !=''">区域订单:<span class="add2">积分{{detail.region}}</span></p>-->
        <!--<p class="add4" style="color:#E53859">合计:<span class="add5">2.0000积分</span></p>-->
        <!--</div>-->
        <!--</div>-->
        <link-opinion></link-opinion>
    </div>
</template>
<script type="text/ecmascript-6">
    import LinkOpinion from '@/components/common/LinkOpinion';
    import ItemGoodsOrder from '@/components/spread/ItemGoodsOrder';
    import Moment from 'moment';

    export default {
        name: `memorderdetail`,
        components: {LinkOpinion, ItemGoodsOrder},
        data() {
            return {
                state: true,
                detail: {}, // 数据主体,
                goods: {} // 商品信息,
            };
        },
        created() {
            this.state = false;
            this.getDetail();
        },
        methods: {
            getDetail() {
                this.state = true;
                this.$Spread.getmemOrderDetail(this.$route.query.id).then(res => {
                    console.log(res);
                    this.detail = res;
                    this.state = false;
                });
                let dataMind = JSON.parse(this.$route.query.obj);
                this.detail.name = dataMind.rec_user; // 用户名
                this.detail.nid = dataMind.id; // 订单号
                this.detail.created = dataMind.created; // 创建时间
                this.detail.money = dataMind.money; // 总额
                this.detail.address = dataMind.rec_province + dataMind.rec_city + dataMind.rec_area + dataMind.rec_detail; // 收货地址
                this.goods = dataMind.buy_list;
            },
            getDes(res) {
                let valText = '';
                res.good.attr.map((val) => {
                    console.log(val, 'value');
                    valText += val.value + ' ';
                });
                return valText;
            }
        },
        computed: {
            dateFormat() {
                // 时间
                return Moment(this.detail.created * 1000).format('YYYY-MM-DD HH:mm');
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl"
    .rec_h {
        width 100vw
    }

    .rec_rebate_t p {
        line-height: vw(25px);
        flex-x();
        padding-left: 8vw
    }

    .rec_rebate_t {
        flex: 1;
        flex-y();
        width 100%;
        align-items flex-end
    }

    .other_lost {
        flex-y();
        width: 100vw;
        box-sizing border-box;
        align-items: flex-start;
        padding: 3vw;
        background: #fff;
        margin-top: 10px;
    }

    .other_m {
        flex-y();
        align-items: stretch;
        padding: 0 3vw;
        box-sizing: border-box;
        width: 100vw;
        background: #fff;
        & .text_l {
            line-height: vw(40px);
            word(14px, #000);
            bor-b(2px, #f5f5f5)
        }
    }

    .other_1 {
        flex-y();
        align-items: stretch;
        justify-content: center;
        padding: 0 3vw;
        width: 100vw;
        box-sizing: border-box;
        height: vw(68px);
        background: #fff
        & li {
            flex-x();
            & p {
                word(14px, #000);
                line-height: vw(20px)
            }
        }
    }

    .other_2 {
        flex-x();
        align-items: center;
        padding: 0 3vw;
        width: 100vw;
        box-sizing: border-box;
        height: vw(43px);
        background: #fff;
        margin: 10px 0;
        & .add {
            flex: 1
        }
    }

    .other_mb {
        flex-x();
        align-items: center;
        box-sizing: border-box;
        height: vw(40px);
        background: #fff;
    }

    .rec span {

    }

    .icon {
        width: 5vw
    }

    .add2 {
        word(14px, #000);
    }

    .add3 {
        word(16px, #E53859);
    }

    .add4 {
        word(14px, #000);
    }

    .add5 {
        word(20px, #E53859);
    }
</style>
